<template>
  <div class="sports-news">
    <h2>体育新闻</h2>
    <div class="news-grid">
      <article v-for="news in newsList" :key="news.id" class="news-item">
        <img :src="news.image" :alt="news.title" class="news-image" />
        <div class="news-content">
          <span class="news-category">{{ news.category }}</span>
          <h3 class="news-title">{{ news.title }}</h3>
          <p class="news-summary">{{ news.summary }}</p>
          <div class="news-meta">
            <span class="news-time">{{ formatTime(news.time) }}</span>
            <span class="news-views">{{ news.views }} 阅读</span>
          </div>
        </div>
      </article>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const newsList = ref([
  {
    id: 1,
    title: '世界杯预选赛：国足主场迎战韩国队',
    summary: '今晚8点，中国男足将在主场迎战韩国队，这场比赛将直接影响小组出线形势。',
    category: '足球',
    image: 'https://picsum.photos/seed/football1/400/250.jpg',
    time: new Date('2024-10-24T10:30:00'),
    views: 15234
  },
  {
    id: 2,
    title: 'NBA新赛季：湖人队首战告捷',
    summary: '勒布朗·詹姆斯在赛季首战中贡献28分8篮板7助攻，带领湖人队战胜勇士队。',
    category: '篮球',
    image: 'https://picsum.photos/seed/basketball1/400/250.jpg',
    time: new Date('2024-10-24T09:15:00'),
    views: 28901
  },
  {
    id: 3,
    title: '网球公开赛：中国选手晋级八强',
    summary: '在昨晚进行的网球公开赛中，中国选手以2:0战胜对手，成功晋级八强。',
    category: '网球',
    image: 'https://picsum.photos/seed/tennis1/400/250.jpg',
    time: new Date('2024-10-24T08:45:00'),
    views: 8765
  },
  {
    id: 4,
    title: 'F1大奖赛：红牛车队继续领跑',
    summary: '在本周末的F1大奖赛中，红牛车队再次包揽前两名，继续领跑车队积分榜。',
    category: '赛车',
    image: 'https://picsum.photos/seed/f1racing/400/250.jpg',
    time: new Date('2024-10-24T07:20:00'),
    views: 12456
  }
])

const formatTime = (time) => {
  const now = new Date()
  const diff = now - time
  const hours = Math.floor(diff / (1000 * 60 * 60))
  
  if (hours < 1) {
    const minutes = Math.floor(diff / (1000 * 60))
    return `${minutes}分钟前`
  } else if (hours < 24) {
    return `${hours}小时前`
  } else {
    const days = Math.floor(hours / 24)
    return `${days}天前`
  }
}
</script>

<style scoped>
.sports-news {
  padding: 20px;
}

.sports-news h2 {
  font-size: 1.8rem;
  color: #2c3e50;
  margin-bottom: 20px;
  border-left: 4px solid #3498db;
  padding-left: 15px;
}

.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.news-item {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.news-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.news-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.news-content {
  padding: 15px;
}

.news-category {
  display: inline-block;
  background: #3498db;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 500;
  margin-bottom: 8px;
}

.news-title {
  font-size: 1.1rem;
  color: #2c3e50;
  margin: 8px 0;
  line-height: 1.4;
  font-weight: 600;
}

.news-summary {
  color: #7f8c8d;
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 10px 0;
}

.news-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
  font-size: 0.8rem;
  color: #95a5a6;
}

@media (max-width: 768px) {
  .news-grid {
    grid-template-columns: 1fr;
  }
  
  .sports-news {
    padding: 15px;
  }
}
</style>